<template>
  <div class="reportHome">
    <div class="bgImg">
      <img src="@as/img/wode_sxhb.png" alt>
    </div>
    <div v-show="listBtnShow" class="btn" @click="goReportList"> <img src="@as/img/wode_list.png"> <span>列表</span> </div>
    <router-view v-transition></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listBtnShow:true
    }
  },
  mounted() {
      console.log(this.$route)
      if(this.$route.name=='reportList'){
          this.listBtnShow = false
      }else {
          this.listBtnShow = true
      }

  },
  methods: {
    goReportList(){
      console.log(1)
      this.$router.push({ path: '/mine/report/list' })
    },
  },
  watch: {
    $route: {
      handler: function(val, oldVal){
        if(val.name=='reportList'){
          this.listBtnShow = false
        }else{
            this.listBtnShow = true
        }
        // if(val.name=='reportList'){
        //   this.listBtnShow = false
        // }
      },
      // 深度观察监听false
      deep: false
    }
  },
  components: {

  }
}
</script>
<style>
#vueg-background{
  background-color: #fff;
}
</style>
<style lang="scss">
.reportHome{
  position: relative;
  overflow-x: hidden;
  .bgImg{
    position: absolute;
    top: 10px;
    right: -157px;
    width: 523px;
    height: 177px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  >.btn{
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 16px;
    top: 43px;
    width:55px;
    height:23px;
    background:rgba(102,102,102,1);
    border-radius:12px;
    img{
      width: 12px;
      height: 10px;
      margin-right: 1px;
    }
    span{
      font-size:10px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(254,254,254,1);
    }
  }
}
</style>
